{% extends "base.html" %}
{% block title %}Legal Chatbot — LegalEase Ai{% endblock %}

{% block extra_styles %}
<style>
.chat-layout { display: flex; height: calc(100vh - 130px); gap: 1.5rem; }

/* ── Main Chat Panel ──────────────────────────────── */
.chat-main {
    flex: 1; display: flex; flex-direction: column;
    background:#FFFFFF;
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-radius: 18px; overflow: hidden;
    border: 1px solid #E5E9F0;
    box-shadow: 0 8px 32px rgba(15,21,34,0.08);
}
.chat-header {
    background:#FFFFFF; color:var(--ink);
    padding: 1rem 1.5rem; display: flex; align-items: center; gap: 0.75rem;
    border-bottom: 1px solid #E5E9F0; flex-shrink: 0;
}
.chat-header .ai-dot { width: 10px; height: 10px; background: #0E7A43; border-radius: 50%; animation: pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:1}50%{opacity:0.5} }

/* ── Messages ─────────────────────────────────────── */
.chat-messages {
    flex: 1; overflow-y: auto; padding: 1.5rem;
    display: flex; flex-direction: column; gap: 1rem;
    scrollbar-width: thin; scrollbar-color: rgba(29,78,216,0.3) transparent;
}
.chat-messages::-webkit-scrollbar { width: 6px; }
.chat-messages::-webkit-scrollbar-thumb { background: rgba(29,78,216,0.3); border-radius: 3px; }
.message { max-width: 75%; }
.message.user { align-self: flex-end; }
.message.assistant { align-self: flex-start; }
.bubble {
    padding: 0.95rem 1.3rem; border-radius: 18px;
    line-height: 1.7; font-size: 0.92rem;
}
.message.user .bubble {
    background: var(--accent);
    color: #fff; border-bottom-right-radius: 4px;
    box-shadow: 0 4px 15px rgba(29,78,216,0.25);
}
.message.assistant .bubble {
    background:#F4F6F9; color:#3F4A5A;
    border: 1px solid #E5E9F0;
    border-bottom-left-radius: 4px;
}
.message-time { font-size: 0.72rem; color:#5B6472; margin-top: 0.3rem; text-align: right; }
.message.assistant .message-time { text-align: left; }

/* ── Input Area ───────────────────────────────────── */
.chat-input-area {
    border-top: 1px solid #E5E9F0;
    padding: 1rem 1.5rem; display: flex; gap: 0.6rem;
    flex-shrink: 0; align-items: flex-end;
    background:#FFFFFF;
}
.chat-input {
    flex: 1; padding: 0.75rem 1rem;
    border: 1px solid #E5E9F0; border-radius: 12px;
    font-size: 0.95rem; resize: none; max-height: 120px;
    background:#F4F6F9; color:var(--ink);
    font-family: inherit; transition: border-color 0.3s;
}
.chat-input:focus { outline: none; border-color: rgba(29,78,216,0.5); box-shadow: 0 0 0 3px rgba(29,78,216,0.15); }
.chat-input::placeholder { color:#67717F; }
.btn-send {
    background: var(--accent);
    color: #fff; border: none; border-radius: 12px;
    width: 44px; height: 44px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(29,78,216,0.3);
}
.btn-send:hover { transform: scale(1.05); box-shadow: 0 6px 20px rgba(29,78,216,0.5); }
.btn-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Upload Button ────────────────────────────────── */
.btn-upload {
    background:#F4F6F9; border: 1px solid #E5E9F0;
    color:#67717F; border-radius: 12px;
    width: 44px; height: 44px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; transition: all 0.3s;
}
.btn-upload:hover { background: rgba(29,78,216,0.15); color: #1D4ED8; border-color: rgba(29,78,216,0.3); }
.file-preview {
    padding: 0.5rem 1rem; background: rgba(29,78,216,0.1);
    border: 1px solid rgba(29,78,216,0.25); border-radius: 10px;
    font-size: 0.8rem; color: #1740B5; display: flex; align-items: center; gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.file-preview .remove-file {
    cursor: pointer; color: #B42318; margin-left: auto; font-size: 0.9rem;
}

/* ── Sidebar ──────────────────────────────────────── */
.chat-sidebar { width: 280px; flex-shrink: 0; }
.quick-q {
    background:#FFFFFF; border: 1px solid #E5E9F0;
    border-radius: 12px; padding: 0.75rem 1rem; cursor: pointer;
    font-size: 0.85rem; color:#3F4A5A; text-align: left;
    width: 100%; margin-bottom: 0.5rem; transition: all 0.3s;
    backdrop-filter: blur(8px);
}
.quick-q:hover { background: rgba(29,78,216,0.15); border-color: rgba(29,78,216,0.3); color:var(--ink); }

/* ── Typing Indicator ─────────────────────────────── */
.typing { display: flex; gap: 4px; align-items: center; padding: 0.5rem 0; }
.typing span { width: 8px; height: 8px; background: #64748b; border-radius: 50%; animation: bounce 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: 0.2s; }
.typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes bounce { 0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-8px)} }

@media (max-width: 768px) {
    .chat-layout { flex-direction: column; height: auto; }
    .chat-main { height: 65vh; }
    .chat-sidebar { width: 100%; }
}

/* ── Language Toggle ──────────────────────────────── */
.lang-toggle {
    display: flex; background:#F4F6F9; border-radius: 10px;
    padding: 3px; gap: 2px; border: 1px solid #E5E9F0;
}
.lang-btn {
    padding: 0.35rem 0.85rem; border-radius: 8px; border: none;
    background: transparent; color:#67717F; font-size: 0.82rem;
    font-weight: 600; cursor: pointer; transition: all 0.25s;
    font-family: inherit;
}
.lang-btn.active {
    background: var(--accent);
    color: #fff; box-shadow: 0 2px 8px rgba(29,78,216,0.3);
}
.lang-btn:not(.active):hover { color:#3F4A5A; background:#F4F6F9; }

/* Urdu RTL text rendering inside bubbles */
.bubble.urdu-text {
    direction: rtl; text-align: right; font-family: 'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', serif;
    font-size: 1.05rem; line-height: 2.1;
}
.chat-input.urdu-mode {
    direction: rtl; text-align: right; font-family: 'Noto Nastaliq Urdu', serif; font-size: 1rem;
}

/* ── Mic Button ───────────────────────────────────── */
.btn-mic {
    background:#F4F6F9; border: 1px solid #E5E9F0;
    color:#67717F; border-radius: 12px;
    width: 44px; height: 44px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem; transition: all 0.3s; flex-shrink: 0;
}
.btn-mic:hover { background: rgba(180,35,24,0.12); color: #B42318; border-color: rgba(180,35,24,0.3); }
.btn-mic.recording {
    background: rgba(180,35,24,0.2); color: #B42318; border-color: rgba(180,35,24,0.5);
    animation: mic-pulse 1.2s infinite;
}
@keyframes mic-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(180,35,24,0.4); }
    50% { box-shadow: 0 0 0 8px rgba(180,35,24,0); }
}
.recording-indicator {
    display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem;
    background: rgba(180,35,24,0.1); border: 1px solid rgba(180,35,24,0.3);
    border-radius: 10px; font-size: 0.82rem; color: #B42318; margin-bottom: 0.5rem;
}
.recording-dot { width: 8px; height: 8px; background: #B42318; border-radius: 50%; animation: pulse 1s infinite; }
.mic-not-supported {
    font-size: 0.7rem; color:#5B6472; cursor: not-allowed !important;
}
</style>
{% endblock %}

{% block content %}
<div class="container" style="padding-top:1.5rem;padding-bottom:1.5rem;">
    <div class="chat-layout">
        <!-- Sidebar -->
        <div class="chat-sidebar">
            <div class="card" style="margin-bottom:1rem;">
                <div class="card-header" style="font-size:0.9rem;"><i class="fas fa-lightbulb" style="color:#D97706;"></i> <span id="quickQTitle">Quick Questions</span></div>
                <div class="card-body" style="padding:0.75rem;" id="quickQuestionsList">
                    <button class="quick-q" onclick="sendQuick(this)">What documents do I need for a land dispute?</button>
                    <button class="quick-q" onclick="sendQuick(this)">How long does a civil case take in Pakistan?</button>
                    <button class="quick-q" onclick="sendQuick(this)">What is the limitation period for contracts?</button>
                    <button class="quick-q" onclick="sendQuick(this)">How do I file a tenant eviction case?</button>
                    <button class="quick-q" onclick="sendQuick(this)">What is khula and how to apply?</button>
                    <button class="quick-q" onclick="sendQuick(this)">Can I recover a loan through civil court?</button>
                </div>
            </div>
            <div class="card">
                <div class="card-body" style="font-size:0.82rem;color:#67717F;line-height:1.7;" id="infoNote">
                    <i class="fas fa-info-circle" style="color:var(--accent);"></i>
                    This chatbot provides general legal information about Pakistani civil law. Always consult a qualified lawyer for specific legal advice.
                </div>
            </div>
            <div class="card" style="margin-top:1rem;">
                <div class="card-body" style="font-size:0.78rem;color:#67717F;line-height:1.6;">
                    <i class="fas fa-microphone" style="color:var(--accent);"></i>
                    Tap the mic and speak — your question sends automatically when you stop talking. Tap the small badge under the mic to switch between English, اردو, and Roman Urdu.
                </div>
            </div>
        </div>

        <!-- Chat Main -->
        <div class="chat-main">
            <div class="chat-header">
                <i class="fas fa-robot" style="color:var(--accent);font-size:1.3rem;"></i>
                <div>
                    <div style="font-weight:700;font-family:var(--font-display);">LegalEase AI</div>
                    <div style="font-size:0.78rem;color:var(--muted);">Legal assistant · English &amp; اردو</div>
                </div>
                <div style="margin-left:auto;display:flex;align-items:center;gap:0.85rem;">
                    <span style="font-size:0.72rem;color:#67717F;background:#F4F6F9;border:1px solid #E5E9F0;padding:0.25rem 0.65rem;border-radius:12px;display:flex;align-items:center;gap:0.35rem;" title="Type in English or Urdu — the AI replies in the same language automatically">
                        <i class="fas fa-language" style="color:var(--accent);"></i> EN / اردو Auto
                    </span>
                    <div class="ai-dot"></div>
                </div>
            </div>

            <div class="chat-messages" id="chatMessages">
                <div class="message assistant" id="welcomeMessage">
                    <div class="bubble">
                        <strong>Welcome to LegalEase Ai!</strong> How may I help you? 👋<br><br>
                        I can help you understand legal procedures, explain your rights, and guide you through Pakistani civil matters.
                    </div>
                    <div class="message-time">Just now</div>
                </div>
            </div>

            <!-- File preview area -->
            <div id="filePreview" style="padding:0 1.5rem;"></div>
            <!-- Recording indicator -->
            <div id="recordingIndicator" style="padding:0 1.5rem;"></div>

            <div class="chat-input-area">
                <!-- Upload button -->
                <input type="file" id="fileInput" accept=".pdf,.doc,.docx,.txt,.png,.jpg,.jpeg,.gif,.webp" style="display:none;" onchange="handleFileSelect(event)">
                <button class="btn-upload" onclick="document.getElementById('fileInput').click()" title="Upload document or image">
                    <i class="fas fa-paperclip"></i>
                </button>

                <!-- Mic button — voice note / voice-to-text -->
                <div style="position:relative;flex-shrink:0;">
                    <button class="btn-mic" id="micBtn" onclick="toggleRecording()" title="Tap to speak your question">
                        <i class="fas fa-microphone" id="micIcon"></i>
                    </button>
                    <span id="micLangBadge" onclick="toggleMicLanguage()"
                        title="Click to switch voice input language between English and Urdu"
                        style="position:absolute;bottom:-6px;right:-6px;background:#F4F6F9;border:1px solid #E5E9F0;color:#67717F;font-size:0.58rem;font-weight:700;padding:0.05rem 0.3rem;border-radius:6px;cursor:pointer;">EN</span>
                </div>

                <textarea class="chat-input" id="chatInput" placeholder="Ask a legal question... / اپنا قانونی سوال لکھیں..." rows="1"
                    onkeydown="handleKey(event)" oninput="autoResize(this)"></textarea>
                <button class="btn-send" onclick="sendMessage()" id="sendBtn" title="Send message">
                    <i class="fas fa-paper-plane"></i>
                </button>
            </div>
        </div>
    </div>
</div>

<script>
let isSending = false;
let selectedFile = null;
// micLanguage declared below for voice input
let isRecording = false;
let recognition = null;

// ── Mic language — the browser's speech engine needs to know which ──
// language to LISTEN for (this is a browser limitation, separate from
// the AI's auto-detection of reply language). Cycle through supported options.
const micLanguages = [
    { code: 'en-US', label: 'EN',   name: 'English' },
    { code: 'ur-PK', label: 'اردو', name: 'Urdu' },
    { code: 'en-PK', label: 'PK',   name: 'Pakistani English / Roman Urdu' }
];
let micLangIndex = 0;
let micLanguage = micLanguages[0].code;

function toggleMicLanguage() {
    micLangIndex = (micLangIndex + 1) % micLanguages.length;
    micLanguage = micLanguages[micLangIndex].code;
    const badge = document.getElementById('micLangBadge');
    if (badge) badge.textContent = micLanguages[micLangIndex].label;
    const micBtn = document.getElementById('micBtn');
    if (micBtn) micBtn.title = `Tap to speak in ${micLanguages[micLangIndex].name}`;
    if (recognition) recognition.lang = micLanguage;
}

// ── Detect if text looks like Urdu script (for rendering bubbles RTL) ──
function isUrduText(text) {
    return /[\u0600-\u06FF\u0750-\u077F]/.test(text);
}

// ── Voice Recording (Web Speech API) ────────────────────────────
function initSpeechRecognition() {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SpeechRecognition) {
        const micBtn = document.getElementById('micBtn');
        micBtn.classList.add('mic-not-supported');
        micBtn.title = 'Voice input not supported in this browser — try Chrome or Edge';
        return null;
    }
    const rec = new SpeechRecognition();
    rec.continuous = false;
    rec.interimResults = true;
    rec.lang = micLanguage;

    rec.onresult = (event) => {
        let transcript = '';
        let isFinal = false;
        for (let i = 0; i < event.results.length; i++) {
            transcript += event.results[i][0].transcript;
            if (event.results[i].isFinal) isFinal = true;
        }
        const input = document.getElementById('chatInput');
        input.value = transcript;
        autoResize(input);

        // Once the browser confirms this is the FINAL recognized phrase,
        // send it straight to the chatbot — no manual typing or click needed.
        if (isFinal && transcript.trim()) {
            stopRecording();
            sendMessage();
        }
    };

    rec.onerror = (event) => {
        console.error('Speech recognition error:', event.error);
        stopRecording();
        if (event.error === 'not-allowed') {
            showRecordingError('Microphone access denied. Please allow microphone permission.');
        } else if (event.error === 'no-speech') {
            showRecordingError('No speech detected. Try again.');
        }
    };

    rec.onend = () => {
        stopRecording();
    };

    return rec;
}

function toggleRecording() {
    if (isRecording) {
        stopRecording();
    } else {
        startRecording();
    }
}

function startRecording() {
    if (!recognition) {
        recognition = initSpeechRecognition();
        if (!recognition) return;
    }
    recognition.lang = micLanguage;

    try {
        recognition.start();
        isRecording = true;
        const micBtn = document.getElementById('micBtn');
        micBtn.classList.add('recording');
        document.getElementById('micIcon').className = 'fas fa-stop';
        micBtn.title = 'Stop recording';

        const indicator = document.getElementById('recordingIndicator');
        const label = micLanguage === 'ur-PK'
            ? 'سن رہا ہے... بولیں، رکنے پر خودکار بھیج دیا جائے گا'
            : 'Listening... speak now, will send automatically when you stop';
        indicator.innerHTML = `<div class="recording-indicator"><span class="recording-dot"></span> ${label}</div>`;
    } catch (e) {
        console.error('Could not start recording:', e);
    }
}

function stopRecording() {
    isRecording = false;
    if (recognition) {
        try { recognition.stop(); } catch(e) {}
    }
    const micBtn = document.getElementById('micBtn');
    micBtn.classList.remove('recording');
    document.getElementById('micIcon').className = 'fas fa-microphone';
    micBtn.title = 'Send a voice note';
    document.getElementById('recordingIndicator').innerHTML = '';
}

function showRecordingError(msg) {
    const indicator = document.getElementById('recordingIndicator');
    indicator.innerHTML = `<div class="recording-indicator" style="color:#B42318;"><i class="fas fa-exclamation-triangle"></i> ${msg}</div>`;
    setTimeout(() => { indicator.innerHTML = ''; }, 3000);
}

function autoResize(el) {
    el.style.height = 'auto';
    el.style.height = Math.min(el.scrollHeight, 120) + 'px';
}

function handleKey(e) {
    if (e.key === 'Enter' && !e.shiftKey) {
        e.preventDefault();
        sendMessage();
    }
}

function handleFileSelect(e) {
    const file = e.target.files[0];
    if (!file) return;
    selectedFile = file;
    const preview = document.getElementById('filePreview');
    const icon = file.type.startsWith('image/') ? 'fa-image' : 'fa-file-alt';
    const size = (file.size / 1024).toFixed(1);
    preview.innerHTML = `
        <div class="file-preview">
            <i class="fas ${icon}"></i>
            <span>${file.name} (${size} KB)</span>
            <span class="remove-file" onclick="removeFile()"><i class="fas fa-times"></i></span>
        </div>`;
}

function removeFile() {
    selectedFile = null;
    document.getElementById('fileInput').value = '';
    document.getElementById('filePreview').innerHTML = '';
}

function addMessage(role, text) {
    const container = document.getElementById('chatMessages');
    const div = document.createElement('div');
    div.className = `message ${role}`;
    const time = new Date().toLocaleTimeString([], {hour:'2-digit', minute:'2-digit'});
    const urduClass = isUrduText(text) ? ' urdu-text' : '';
    div.innerHTML = `<div class="bubble${urduClass}">${text.replace(/\n/g,'<br>')}</div><div class="message-time">${time}</div>`;
    container.appendChild(div);
    container.scrollTop = container.scrollHeight;
    return div;
}

function showTyping() {
    const container = document.getElementById('chatMessages');
    const div = document.createElement('div');
    div.className = 'message assistant';
    div.id = 'typingIndicator';
    div.innerHTML = '<div class="bubble"><div class="typing"><span></span><span></span><span></span></div></div>';
    container.appendChild(div);
    container.scrollTop = container.scrollHeight;
}

function removeTyping() {
    const t = document.getElementById('typingIndicator');
    if (t) t.remove();
}

async function sendMessage() {
    if (isSending) return;
    const input = document.getElementById('chatInput');
    const message = input.value.trim();
    if (!message && !selectedFile) return;

    isSending = true;
    input.value = '';
    input.style.height = 'auto';
    document.getElementById('sendBtn').disabled = true;

    let displayMsg = message;
    if (selectedFile) {
        displayMsg += (displayMsg ? '<br>' : '') + `<span style="font-size:0.82rem;color:#1D4ED8;"><i class="fas fa-paperclip"></i> ${selectedFile.name}</span>`;
    }
    addMessage('user', displayMsg);
    
    // Clear file after sending
    const fileToSend = selectedFile;
    removeFile();
    
    showTyping();

    try {
        let textToSend = message;
        // If a file is attached, read its text content (for text files) or note it
        if (fileToSend) {
            if (fileToSend.type.startsWith('text/') || fileToSend.name.endsWith('.txt')) {
                const fileText = await fileToSend.text();
                textToSend += `\n\n[Attached document "${fileToSend.name}"]:\n${fileText.substring(0, 3000)}`;
            } else {
                textToSend += `\n\n[User attached a file: ${fileToSend.name} (${fileToSend.type})]`;
            }
        }

        const res = await fetch('/api/chat', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify({message: textToSend}),  // server auto-detects language from the text
            credentials: 'include',
        });
        const data = await res.json();
        removeTyping();
        addMessage('assistant', data.response || 'Sorry, I could not get a response.');
    } catch(e) {
        removeTyping();
        addMessage('assistant', 'Connection error. Please try again.');
    }

    isSending = false;
    document.getElementById('sendBtn').disabled = false;
    input.focus();
}

function sendQuick(btn) {
    const input = document.getElementById('chatInput');
    input.value = btn.textContent;
    sendMessage();
}
</script>
{% endblock %}